var dateFormat = function(date, s) {
  var num = function(n) {
    if(n > 9) return n;
    return "0" + n;
  };
  var year = date.getFullYear(),
    month = date.getMonth() + 1,
    d = date.getDate(),
    h = date.getHours(),
    m = date.getMinutes();
  month = num(month);
  d = num(d);
  h = num(h);
  m = num(m);
  s = s || "-";
  return [year, month, d].join(s) + " " + [h,m].join(":")
};

var dataInit = function(data, type){
  var num = 0;
  if(type == 2) {
			num = Math.random();
  }

  var datas = [],
    item = {},
    cDate = null;
  for(var i=0, len=data.length;i<len;i++){
    item = {};
    cDate = new Date((~~data[i].clock)*1000);
    item['name'] = cDate.toString();
    item['value'] = [dateFormat(cDate), data[i].value]
    datas.push(item);
  }
  return datas;
};

var line = function(dom, datas, datas2, setIntervalBack,color) {
  var myChart = echarts.init(dom);
  var option = null;
  var color1 = "#6e6b9b";
  var areabg =  {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: 'rgba(255, 158, 68, .5)'
    }, {
      offset: 1,
      color: 'rgba(255, 70, 131, .5)'
    }])
  };
  var lineColor= "#f35287";
  var areabg2 =  {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: 'rgba(38, 115, 252, .5)'
      }, {
        offset: 1,
        color: 'rgba(88, 16, 184, .5)'
      }])
    };
  var lineColor2 = "#2673fc"

  if(color === 'y') {
      areabg2 =  {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(249, 204, 33, .5)'
        }, {
          offset: 1,
          color: 'rgba(249, 101, 2, .5)'
        }])
      };
      lineColor2 = "#f9cd21"
  }

  option = {
    color: ['#f35287', '#2673fc'],
    tooltip: {
      trigger: 'axis',
      // formatter: function (params) {
      //   params = params[0];
      //   var date = new Date(params.name);
      //         return dateFormat(date) + '<br/>' + params.value[1];
      //   return params['data'][0] + "<br/>" + params['data'][1]
      // },
      axisPointer: {
        animation: false,
        lineStyle: {
          color: "rgba(255, 255, 255, .2)"
        }
      },
      padding: [5,10],
      borderRadius: 0,
    },
    legend: {
      data:['流入','流出'],
      textStyle: {
          color: '#fff',
      },
      x: 'right',
      padding: 15,
      icon: "rect",
      itemWidth: 20,  // 设置宽度
      itemHeight: 4,
      itemGap: 20
    },
    grid: {
      left: '15%',
      bottom:'10%',
      top: '10%',
      right: "4%"
    },
    xAxis: {
      type: 'time',
      boundaryGap: false,
      splitLine: {
        show: false,
      },
      axisTick: {
        lineStyle: {
          color: color1
        }
      },
      axisLine: {
        lineStyle: {
          color: color1
        }
      },
      axisLabel: {
        formatter: function(value, index) {
          var d = dateFormat(new Date(value));
          if(index == 0) {
            return d;
          }
          return d.split(" ")[1]
        }
      },
      min: 'dataMin',
            max: 'dataMax'
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      splitLine: {
        show: false
      },
      axisTick: {
        lineStyle: {
          color: color1
        }
      },
      axisLine: {
        lineStyle: {
          color: color1
        }
      },
      max: 'dataMax'
    },
    series: [{
      name: '流入',
      type: 'line',
      smooth: true,
      showSymbol: false,
      hoverAnimation: false,
      symbolSize: 8,
      areaStyle: areabg,
      lineStyle: {
        color: lineColor,
        width: 3,
      },
      data: datas
    },
    {
      name: '流出',
      type: 'line',
      smooth: true,
      showSymbol: false,
      hoverAnimation: false,
      symbolSize: 8,
      areaStyle: areabg2,
      lineStyle: {
        color: lineColor2,
        width: 3,
      },
      data: datas2
    }]
  };
  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }

  setIntervalBack && setIntervalBack(myChart, option, datas, datas2);
};

var line2 = function(dom, datas, datas2, setIntervalBack,color) {
  var myChart = echarts.init(dom);
  var option = null;
  var color1 = "#6e6b9b";
  var areabg =  {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: 'rgba(255, 158, 68, .5)'
    }, {
      offset: 1,
      color: 'rgba(255, 70, 131, .5)'
    }])
  };
  var lineColor= "#f35287";

  if(color == "blue") {
      var areabg =  {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(38, 115, 252, .5)'
        }, {
          offset: 1,
          color: 'rgba(88, 16, 184, .5)'
        }])
      };
    var lineColor = "#2673fc"
  }

  if(color === 'y') {
      areabg2 =  {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(249, 204, 33, .5)'
        }, {
          offset: 1,
          color: 'rgba(249, 101, 2, .5)'
        }])
      };
      lineColor2 = "#f9cd21"
  }

  option = {
    color: ['#f35287', '#2673fc'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        animation: false,
        lineStyle: {
          color: "rgba(255, 255, 255, .2)"
        }
      },
      padding: [5,10],
      borderRadius: 0,
    },
    grid: {
      left: '15%',
      bottom:'10%',
      top: '10%',
      right: "4%"
    },
    xAxis: {
      type: 'time',
      boundaryGap: false,
      splitLine: {
        show: false,
      },
      axisTick: {
        lineStyle: {
          color: color1
        }
      },
      axisLine: {
        lineStyle: {
          color: color1
        }
      },
      axisLabel: {
        formatter: function(value, index) {
          var d = dateFormat(new Date(value));
          if(index == 0) {
            return d;
          }
          return d.split(" ")[1]
        }
      },
      min: 'dataMin',
            max: 'dataMax'
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      splitLine: {
        show: false
      },
      axisTick: {
        lineStyle: {
          color: color1
        }
      },
      axisLine: {
        lineStyle: {
          color: color1
        }
      },
      max: 'dataMax'
    },
    series: [{
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      hoverAnimation: false,
      symbolSize: 8,
      areaStyle: areabg,
      lineStyle: {
        color: lineColor,
        width: 3,
      },
      data: datas
    }]
  };
  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }

  setIntervalBack && setIntervalBack(myChart, option, datas, datas2);
};

var timerLock = false;
var setInterval1 = function(myChart, option, datas, datas2) {
  setInterval(function () {
    if(timerLock) return;
    timerLock = true;
    $.ajax({
      url: getRequstURL('GetNewNetwork'),
      type: 'GET',
      data: {
        hostid: 10362,
        flow_in: 0,
        flow_out: 1,
        card_in: '1/4',
        card_out: '1/4'
      },
      success: function(res){
        datas.shift();
        datas.push(dataInit(res[0]['incoming'])[0]);
        datas2.shift();
        datas2.push(dataInit(res[0]['outgoing'])[0]);
        myChart.setOption({
          series: [{
            data: datas
          },
          {
            data: datas2
          }]
        });
      },
      error: function(error){},
      complete: function() {
          timerLock = false;
      }
    });
  }, 60 * 1000);
};

var timerLock2 = false;
var setInterval2 = function(myChart, option, datas, datas2) {
  setInterval(function () {
    if(timerLock2) return;
    timerLock2 = true;
    $.ajax({
      url: getRequstURL('GetNewNetwork'),
      type: 'GET',
      data: {
        hostid: 10362,
        flow_in: 0,
        flow_out: 1,
        card_in: '2/4',
        card_out: '2/4'
      },
      success: function(res){
        datas.shift();
        datas.push(dataInit(res[0]['incoming'])[0]);
        datas2.shift();
        datas2.push(dataInit(res[0]['outgoing'])[0]);
        myChart.setOption({
          series: [{
            data: datas
          },
          {
            data: datas2
          }]
        });
      },
      error: function(error){},
      complete: function() {
          timerLock2 = false;
      }
    });
  }, 60 * 1000);
}

var timerLock3 = false;
var setInterval3 = function(myChart, option, datas, datas2) {
  setInterval(function () {
    if(timerLock3) return;
    timerLock3 = true;
    $.ajax({
      url: getRequstURL('CPUNew'),
      type: 'GET',
      data: {
        hostid: 10674,
      },
      success: function(res){
        datas.shift();
        datas.push(dataInit(res[0]));
        myChart.setOption({
          series: [{
            data: datas
          }]
        });
      },
      error: function(error){},
      complete: function() {
          timerLock3 = false;
      }
    });
  }, 60 * 1000);
}

var timerLock4 = false;
var setInterval4 = function(myChart, option, datas, datas2) {
  setInterval(function () {
    if(timerLock4) return;
    timerLock4 = true;
    $.ajax({
      url: getRequstURL('CPUNew'),
      type: 'GET',
      data: {
        hostid: 10421,
      },
      success: function(res){
        datas.shift();
        datas.push(dataInit(res[0]));
        myChart.setOption({
          series: [{
            data: datas
          }]
        });
      },
      error: function(error){},
      complete: function() {
          timerLock3 = false;
      }
    });
  }, 60 * 1000);
}

function chartLine(dom, key, setInterval, type, color) {
    var cardIn = '1/4',
        cardOut = '1/4';
    if(type == '2') {
        cardIn = '2/4',
        cardOut = '2/4';
    }
    $.ajax({
        url: getRequstURL(key),
        type: 'GET',
        data: {
          hostid: 10362,
          flow_in: 0,
          flow_out: 1,
          card_in: cardIn,
          card_out: cardOut
        },
        success: function(res){
          var datas = dataInit(res[0]['incoming']),
              datas2 = dataInit(res[0]['outgoing']);
          line(dom, datas, datas2, setInterval || null, color);
        },
        error: function(error){
          console.log(error)
        }
    });
}

function chartLine2(dom, key, setInterval, type, color) {
  var hostid = 10674;
  if(type == '2') {
      hostid = 10421
  }
  $.ajax({
      url: getRequstURL(key),
      type: 'GET',
      data: {
        hostid: hostid,
      },
      success: function(res){
        var datas = dataInit(res, 2)
        line2(dom, datas, null, setInterval || null, color);
      },
      error: function(error){
        console.log(error)
      }
  });
}